<template>
  <div style="width: 70%;margin-left: 15%">
    <div class="header">
      <h3>ChatGPT</h3>
    </div>
    <div class="main">
      <div class="talkshow">
        <div v-for="item in list" :key="item.id" :class="item.id=='2'?'atalk':'btalk'">
          <span>{{item.content}}</span>
        </div>
      </div>
    </div>
    <div class="sendbox" >
      <el-input type="text" style="width: 75%" v-model="wordone" class="inputword" @keyup.enter="sendmsg1"/>
      <el-button type="primary" style="margin-left: 10px;width: 20%" value="发送" @click="sendmsg1" class="btnsend">发送</el-button>

<!--      <el-input  @keyup.enter.native="search" style="width: 300px;margin:10px 0;"  placeholder="请输入证书ID"-->
<!--                 v-model="certificateNum" suffix-icon="el-icon-notebook-1"></el-input>-->
<!--      <el-button  type="primary" style="margin-left: 10px" @click="search">搜索</el-button>-->
    </div>
   </div>
</template>

<script>
import axios from "axios";

export default {
  name: "User",
  data(){
    return{

      list:[
        {id:2,name:'ChatGPT',content:'你好，有任何问题都可以问我。'}
      ],
      wordone:'',
      wordtwo:'',
    }
  },
  created() {
    this.load()
  },
  methods:{
    sendmsg1(){
      var str=this.wordone
      this.list.push({id:1, name:'我', content:this.wordone});
      this.wordone=''
      //发送到后端
      this.request.get("/chat",{
        params:{
          message:str
        }
      }).then(res=>{
        console.log(res)
        this.list.push({id:2, name:'ChatGPT', content:res.message});
      })
    },
  }
}
</script>

<style  scoped>
body{
  background-color: lightcyan;
}
#box1,#box2{
  width: 380px;
  height: 520px;
  background-color: pink;
  margin: 50px 90px;
  border-radius: 15px;
}

#box1{
  float: left;
}
#box2{
  float: right;
}
.header{
  text-align: center;
  border: 1px solid #7DB6BF;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
h3{
  margin: 2px;
  padding: 2px;
  color: darkgrey;
}
.main{
  height: 85%;
  overflow: scroll;
  border: 1px solid #7DB6BF;
  /*background-color: #7DB6BF;*/
}
div::-webkit-scrollbar{
  display: none;
}
.atalk{
  margin: 10px;
}
.atalk span{
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid aliceblue;
  border-radius: 15px;
  background-color: #7DB6BF;
}
.btalk{
  text-align: right;
  margin: 10px;
}
.btalk span{
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid aliceblue;
  border-radius: 15px;
  background-color: #cccccc;
}

.sendbox{
  height: 50px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;

  margin-top: 10px;
  /*margin-left: 2%;*/
}
.inputword{
  /*outline: none;*/
  /*width: 75%;*/
  /*height: 40px;*/
  /*border-radius: 5px;*/
  /*text-indent: 15px;*/
}
.btnsend{
  /*outline: none;*/
  /*width: 20%;*/
  /*height: 35px;*/
  /*border-radius: 5px;*/
  /*border: 1px solid grey;*/
  /*margin-left: 2%;*/
}

</style>

